<template lang="">
    <div class="box-maxs">
        <div class="box">
            <ul v-if="!emptyList" v-infinite-scroll="load" :infinite-scroll-immediate="false" class="infinite-list"
                style="overflow: auto;" ref="scrollContainer">
                <li v-for="(item, index) in searchList" :key="index" @click="onVideo(item.videoId)" class="box-img">
                    <el-image style="width: 100%; height: 22rem" :src="item.coverUrl" fit="cover" />
                    <div class="box-card-text">
                        <div class="card-text-num">
                            <p>
                                <font-awesome-icon :icon="['fas', 'heart']" />
                                {{ item.likeCount }}
                            </p>
                            <p>
                                <font-awesome-icon :icon="['fas', 'thumbs-up']" />
                                {{ item.collectionCount }}
                            </p>
                        </div>
                        <div class="card-text-title">
                            <div class="top">
                                <p> {{ item.title }}<span
                                        v-for="(items,indexs) in item.categories">#{{ items.categoryName }}</span>
                                </p>
                            </div>
                            <div class="bottom">
                                <p>@{{ item.author.nickname }}</p>
                                <p>{{ item.time }}</p>
                            </div>
                        </div>
                    </div>
                </li>
                <li v-for="(item,index) in 10" :key="index" class="skeleton-loding">
                    <el-skeleton class="skeleton" :loading="loading" animated>
                        <template #template>
                            <div>
                                <el-skeleton-item variant="image" style="width: 100%; height: 22rem" />
                                <div style="padding-top: 1rem">
                                    <el-skeleton-item variant="h3" style="width: 100%;margin-top: 0.3rem;" />
                                    <div
                                        style="display: flex;align-items: center;justify-items: space-around;margin-top: 1.6rem;height: 16px;">
                                        <el-skeleton-item variant="text" style="margin-right: 16px" />
                                        <el-skeleton-item variant="text" style="width: 30%" />
                                    </div>
                                </div>
                            </div>
                        </template>
                        <template #default>
                        </template>
                    </el-skeleton>
                </li>
            </ul>

            <!-- 空状态 -->
            <div v-if="emptyList" class="box-emptyList">
                <div class="emptyList">
                    <Vue3Lottie ref="emptyLottieContainer" :animationData="emptyJson" height="40%" width="40%" />
                    <p>还没有数据哎！</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
    import {
        useRoute,
        useRouter
    } from "vue-router"
    import {
        ref,
        onMounted,
        watch
    } from 'vue'
    import {
        searchVideo
    } from '@/apis/api/list';
    import emptyJson from '../../assets/lottie/empty.json';

    const $route = useRoute()
    const $router = useRouter()


    const searchList = ref([])

    const page = ref(1)
    const pageSize = ref(10)

    let requestAwait = false

    const keyword = ref('')

    const loading = ref(true) // 判断是否加载完成后的dom，false为加载完成，true为加载中

    const emptyList = ref(false) // 判断当前数据列表是否为空

    onMounted(() => {
        keyword.value = $route.query.keyword
        emptyList.value = false
        getData()
    })

    watch(
        () => $route.query,
        (newQuery, oldQuery) => {
            emptyList.value = false
            keyword.value = newQuery.keyword
            page.value = 1
            searchList.value = []
            getData()
        }, {
            deep: true // 深度监听对象内部的变化
        }
    );

    const load = () => {
        if (requestAwait) {
            return
        }
        requestAwait = true
        page.value++
        getData()
    }
    
    const getData = async () => {
        // 构造请求数据对象
        const data = {
            page: page.value,
            pageSize: pageSize.value,
            keyword: keyword.value,
            ids: []
        }

        try {
            loading.value = true

            // 发起搜索视频请求
            const res = await searchVideo(data)
            console.log(res);

            // 如果返回代码为8，则跳转到主页并刷新
            if (res.code === 8) {
                $router.push({
                    name: "home",
                    query: {
                        refresh: true
                    }
                })
            }

            requestAwait = false

            if (res.data) {
                // 将返回的数据追加到搜索列表中
                searchList.value.push(...res.data)
                loading.value = false
                return
            } else if (res.code === 0 && res.data === null) {
                loading.value = false

                if (!searchList.value.length) {
                    // 如果搜索列表为空，将emptyList设置为true
                    emptyList.value = true
                    return
                }
            }

            // 防止请求首页时返回为空时循环请求
            if (page.value !== 1) {
                // 将页码重置为0并重新加载数据
                page.value = 0
                load()
            }

            loading.value = false
        } catch (error) {
            console.log(error)
        }
    }

    const onVideo = (videoId) => {
        $router.push({
            name: "video",
            query: {
                videoId,
                categoryId: '111',
                page: page.value,
                keyword: keyword.value,
                ids: []
            }
        })

    }
</script>

<style scoped>
    ul {
        margin: 0;
        padding: 0;
    }

    li {
        list-style: none;
    }

    .waterfall-item {
        position: absolute;
        left: 0;
        top: 0;
    }

    .waterfall-item img {
        display: black;
    }

    .box-maxs {
        width: 100%;
        height: 100%;
        padding: 1rem;
        box-sizing: border-box;
    }

    .box {
        width: 100%;
        height: 100%;
    }

    .infinite-list {
        min-height: 84vh;
        height: 84vh;
        display: flex;
        flex-wrap: wrap;
        column-gap: 1.7rem;
    }

    .scr {
        width: 100%;
        height: 100%;
    }

    .box-img {
        width: 17.6rem;
        height: 28.6rem;
        margin-bottom: 2rem;
        cursor: pointer;
        border-radius: 1rem;
        overflow: hidden;
        background-color: rgb(245, 245, 245);
        color: rgba(0, 0, 0, 0.9);
        transition: box-shadow 0.3s;
    }

    .box-img:hover {
        background-color: #626aef;
        color: white;
        box-shadow: 0.8rem 0.8rem 0.8rem rgb(178, 178, 178);
    }

    .box-img>img {
        width: 100%;
    }

    .box-card-text {
        display: flex;
        flex-direction: column;
        position: relative;
    }

    .card-text-num {
        height: 2rem;
        width: 100%;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        padding: 0 1rem;
        align-items: center;
        position: absolute;
        bottom: 100%;
        color: rgba(255, 255, 255, 0.8);
    }

    p {
        padding: 0;
        margin: 0;
    }

    .card-text-title {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0.8rem;
    }

    .card-text-title>.top {
        height: 3rem;
        overflow: hidden;
    }

    .card-text-title>.bottom {
        display: flex;
        justify-content: space-between;
    }

    .skeleton {
        width: 100%;
        height: 100%;
    }


    .skeleton-loding {
        display: flex;
        flex-wrap: wrap;
        column-gap: 1.7rem;
    }

    .skeleton-loding>div {
        width: 17.6rem;
        height: 28.6rem;
        margin-bottom: 2rem;
        cursor: pointer;
        border-radius: 1rem;
        overflow: hidden;
    }

    .box-emptyList {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .emptyList {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .emptyList>p {
        text-align: center;
        font-size: 1.4rem;
    }
</style>